<template>
  <div class="MySize">
    <div class="info">
      <div class="img">
        <img :src="image" alt="" />
      </div>
      <div class="inf">
        <div class="store_name">{{ store_name }}</div>
        <div class="tp">
          ￥<span class="price">{{price }}</span>
          <span class="store">库存:{{ stock }}</span>
        </div>
      </div>
    </div>

    <div class="box" v-if="attr">
      <div class="ty_com size">
        <div class="ty_td size_td" v-if="sizeVissably">尺码</div>
        <div class="item" ref="size">
          <span
            v-for="(item, i) in productAttr[0].attr_value"
            :key="i"
            :class="index == i ? 'active' : ''"
            @click="clickSize(i, item.attr)"
          >
            {{ item.attr }}
          </span>
        </div>
      </div>
      <div class="ty_com color">
        <div class="ty_td color_td" v-if="colorVissably">颜色</div>
        <div class="item">
          <span
            v-for="(item, i) in productAttr[1].attr_value"
            :key="i"
            :class="square == i ? 'active' : ''"
            @click="clickColor(i, item.attr)"
          >
            {{ item.attr }}
          </span>
        </div>
      </div>
    </div>

    <div class="ty_com count">
      <div class="ty_td count_td">数量</div>
      <div class="count_com">
        <div>-</div>
        <div class="num">1</div>
        <div>+</div>
      </div>
    </div>

    <div class="closeBtn" @click="closeAttr">
      <img src="../../assets/icon/detail/close_8a.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "",
      size: "",

      colorVissably: false, // 控制颜色显示
      sizeVissably: false, // 控制尺码显示

      index: "", // 点击选择对应尺码
      square: "", // 点击选择对应颜色

      attrObj: {},

      image: "",
      price: "",
      sales: "",
      stock: "",
      suk: "",
      unique:"",
    };
  },
  props: {
    productAttr: {
      type: Array,
    },
    store_name: {
      type: String,
    },
    images: {
      type: Array,
    },
    productValue: {
      type: Object,
    },
  },
  computed: {
    attr() {
      if (this.productAttr.length == 0) {
        return false;
      } else {
        for (let i = 0; i < this.productAttr.length; i++) {
          if (this.productAttr[i].attr_name == "尺码") {
            this.size = this.productAttr[i].attr_value[0].attr;
            this.sizeVissably = true;
          }
          if (this.productAttr[i].attr_name == "颜色") {
            this.color = this.productAttr[i].attr_value[0].attr;
            this.colorVissably = true;
          }
        }

        return true;
      }
    },

    // attrValue(){
    //   return this.size+","+this.color
    // }
  },
  created() {
    
  },

  mounted() {this.getAttrValue();},
  methods: {
    closeAttr() {
      this.$emit("closeAttr", false);
    },

    clickSize(i, str) {
      this.index = i;
      this.size = str;
      this.getAttrValue();
    },

    clickColor(i, str) {
      this.square = i;
      this.color = str;
      this.getAttrValue();
    },

    getAttrValue() {
      for (let key in this.productValue) {
        if (this.size + "," + this.color == key) {
          this.image = this.productValue[key].image;
          
          this.price = this.productValue[key].price;
          this.sales = this.productValue[key].sales;
          this.stock = this.productValue[key].stock;
          this.suk = this.productValue[key].suk;
          // this.attrObj.image = this.productValue[key].image
          // this.attrObj.price = this.productValue[key].price
          // this.attrObj.sales = this.productValue[key].sales
          // this.attrObj.stock = this.productValue[key].stock
          // this.attrObj.suk = this.productValue[key].suk
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.MySize {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
  z-index: 110;
  padding: 13px 15px 60px;
  background-color: #fff;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  //   position: relative;
  .info {
    height: 75px;
    display: flex;
    .img {
      width: 75px;
      height: 75px;
      border-radius: 8px;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
      }
    }

    .inf {
      width: 205px;
      height: 75px;
      margin-left: 15px;
      .store_name {
        width: 100%;
        color: #202020;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .tp {
        margin-top: 27px;
        font-size: 12px;
        color: #fc4141;
        .price {
          font-size: 18px;
        }
        .store {
          margin-left: 15px;
          color: #999;
        }
      }
    }
  }
  .ty_com {
    margin-top: 18px;
    .ty_td {
      color: #999;
      font-size: 15px;
    }
  }
  .size {
    .item {
      span {
        display: inline-block;
        border: 1px solid #bbb;
        padding: 4px 16px;
        font-size: 13px;
        color: #202020;
        border-radius: 3px;
        margin: 5px 5px 0 0;
      }
      span.active {
        background-color: #ff3700;
        color: #fff;
      }
    }
  }
  .color {
    .item {
      span {
        display: inline-block;
        border: 1px solid #bbb;
        padding: 4px 16px;
        font-size: 13px;
        color: #202020;
        margin: 5px 5px 0 0;
        border-radius: 3px;
      }

      span.active {
        background-color: #ff3700;
        color: #fff;
      }
    }
  }
  .count {
    .count_com {
      margin-top: 5px;
      display: flex;
      height: 27px;
      width: 99px;
      border-radius: 3px;
      border: 1px solid #e3e3ee;
      color: #dedede;
      font-size: 22px;
      > div {
        flex: 1;
        line-height: 27px;
        text-align: center;
      }
      .num {
        font-size: 13px;
        border-left: 1px solid #e3e3ee;
        border-right: 1px solid #e3e3ee;
        color: #333;
      }
    }
  }

  .closeBtn {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 15px;
    height: 15px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

